<template>
	<view class="" v-if="pageShow">
		<view class="toubox flexbetween">
			<view class="flexleft">
				<image class="touxiag margin_right3" :src="userInfo.avatar_text" mode=""></image>
				<view class="sanshier xiaobai fonweight">{{userInfo.nickname}}</view>
			</view>
			<view class="bjbox flexcenter">
				<image class="djicon margin_right1" :src="userInfo.userlvel.image_text" v-if="userInfo.user_level_id && userInfo.userlvel!=null" mode=""></image>
				<view class="ershil xiaobai" v-if="userInfo.user_level_id==0 || userInfo.userlvel==null">普通会员</view>
				<view class="ershil xiaobai" v-else>{{userInfo.userlvel.name}}</view>
			</view>
		</view>
		<!--  会员说明-->
		<view class="mainpadding">
			<view class="titletext zhonghei fonweight">会员说明</view>
			<view class="flexleft flex_wrap">
				<view class="ershiw flexcenter margin_top" v-for="item in list" :key="item.id" @click="tzhyxq(item)">
					<view class="">
						<view class="wmbox flexcenter">
							<image class="hyico" :src="item.image_text" mode=""></image>
						</view>
						<view class="ershil xiaohui margin_top2">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list:[],
				userInfo:{},
				pageShow:false
			}
		},
		onLoad() {
			this.init()
			this.userinfomsg()
		},
		methods: {
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
					this.pageShow = true
				})
			},
			init() {
				httpRequest.request('/api/user/userDesIndex', 'GET', {}).then(res => {
					this.list = res.data
				})
			},
			// 跳转会员详情
			tzhyxq(item){
				uni.navigateTo({
					url:'/pages_wode/huiyuansmxq?id='+item.id+"&name="+item.name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hyico{
		width: 48rpx;
		height: 48rpx;
	}
	.wmbox{
		width: 100rpx;
		height: 100rpx;
		background:#f9eee6;
		border-radius: 50%;
	}
	.djicon{
		width: 61rpx;
		height: 61rpx;
	}
	.bjbox{
		background-color: #59595c;
		border-radius: 33rpx;
		padding: 6rpx 30rpx;
	}
	.touxiag{
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
	}
.toubox{
	padding: 30rpx 30rpx 50rpx;
	background-color: #1b1a1f;
}
</style>
